<template>
    <div>
        <h3>专题精选</h3>
        <van-swipe :loop="false" :width="300" :show-indicators='false'>
            <van-swipe-item v-for="item in topicListArr" :key="item.id">
                <img :src="item.item_pic_url" alt="">
                <p>{{ item.title }}</p>
                <p class="subtitle">{{ item.subtitle }}</p>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script setup lang='ts'>
import { defineProps } from 'vue'
import type { Itopiclistitem } from '@/types/homeType'
const props = defineProps<{
    topicListArr: Array<Itopiclistitem>
}>()

</script>
<style scoped lang="scss">
h3 {
    text-align: center;
}

.van-swipe-item {
    img {
        width: 100%;
        height: 166.67px;
    }

    .subtitle {
        color: red;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>